.root {
  display: inline-block;
  line-height: 0;
  cursor: pointer;

  color: var(--vd-color-gray-500);

  &:global(.error) {
    color: var(--vd-color-danger-300);

    &:hover {
      color: var(--vd-color-danger);
    }
  }

  &:global(.warning),
  &:global(.tip) {
    color: var(--vd-color-warning-300);

    &:hover {
      color: var(--vd-color-warning);
    }
  }
}

.content {
  max-width: 400px;
}

.tooltip {
  font-size: var(--vd-font-size-h6);
  color: var(--vd-color-font-regular);
  margin-bottom: var(--vd-spacing-sm);
}
